<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main">
        <div class="box">
            <p>段落内容</p>
        </div>
    </div>
</body>
<script>
    // 输出到文档(在页面写入内容),写入的内容不会换行,换行只能<br>标签
    document.write('段落内容<br>');
    document.write('段落内容');
    document.write('<h1>段落内容</h1>');

    // 创建元素 想创建什么元素就把元素的名字写入小括号内
    // 创建出来的标签需要指定位置所在,不然不能显示
    // 把h2添加为body子元素,appendChild(h2):添加到末尾
    var h2 = document.createElement('h2');
    document.body.appendChild(h2);

    //创建文本节点
    var txt = document.createTextNode('我是富婆');
    //appendChild(txt):在末尾添加,内容会拼接在一起
    h2.appendChild(txt);
    h2.innerText += '是我';

    //这种创建方式会覆盖原有内容
    document.body.innerHTML='<h3>都是富婆</h3>';

</script>

</html>